<template>
  <!--网站底部-->
  <div class="footer">
    <el-row :gutter="24" style="padding-top: 10px">
      <el-col :sm="8">
        <el-row :gutter="24" class="footer-title" style="margin-top: 15px">
          <el-col :span="4" :offset="5">联系博主</el-col>
        </el-row>
        <el-row :gutter="24" class="footer-content" >
          <el-col :span="8" :offset="3">
            QQ：1515729284<br>
            1515729284@qq.com
          </el-col>
          <el-col :span="3" :offset="0" >
            <el-image :src="src" style="width: 60px; height: 60px"></el-image>
          </el-col>
        </el-row>
      </el-col>


      <el-col :sm="8">
        <el-row :gutter="24" class="footer-title" style="margin-top: 15px">
          <el-col :span="24">签名</el-col>
        </el-row>
        <el-row :gutter="24" class="footer-content">
          <el-col :span="24" style="font-size: 15px">
            青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪
          </el-col>
        </el-row>
      </el-col>
      <el-col :sm="8">
        <el-row :gutter="24" class="footer-title" style="margin-top: 15px">
          <el-col :span="24">当前时间</el-col>
        </el-row>
        <el-row :gutter="24" class="footer-content">
          <el-col :span="24">
            <span>{{nowDateTime}}</span>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    <el-divider ></el-divider>

    <el-row :gutter="24" style="height: 50px;margin-top: 25px;font-size: 12px">
      <el-col :span="24">
        Copyright&nbsp;&copy;&nbsp;2021-2022&nbsp;YeYuanQi's&nbsp;HotTop.&nbsp;All&nbsp;rights&nbsp;reserved.&nbsp;
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      nowDateTime: '',//当前日期时间
      src: 'https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting//website/static/footPict.webp',

    }
  },
  methods:{
    getTime(){
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.nowDateTime = yy+'年 '+mm+'月'+dd+'日 '+hh+':'+mf+':'+ss;
    },
    currentTime(){
      setInterval(this.getTime,500)
    },
  },
  created() {
    this.currentTime();
  }

}
</script>

<style scoped>
.footer-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
}

.footer-content {
  font-size: 13px;
}
.footer {
  margin-top: 50px;
  text-align: center;
  min-height: 20px;
  max-width: 100%;
  padding: 0 15px;

}

</style>